<script setup>
import { ref, onMounted } from 'vue';
import { ipage, workers, ifd, specieNameList, specieDetail, delmi } from '@/utils/api.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

import lms from '@/assets/img/moreImg.png'
import nwav from '@/assets/img/nwav.png'

const router = useRouter();
const { currentRoute } = useRouter();
const route = currentRoute.value;
const workerslist = ref([]);
const option = [
    {
        value: '0',
        label: '未鉴定',
    },
    {
        value: '1',
        label: '已鉴定',
    },
    {
        value: '2',
        label: '无法鉴定',
    }
];
const currentPage = ref(1);
const background = ref(false);
const disabled = ref(false);
const total = ref(100);
const dlist = ref([]);
let pageNum = 0;
let startTime = '';
let endTime = '';
let specieType = '';
let resourceType = '';
let surveyType = '';
const checked3 = ref(false);
const checked4 = ref(false);
const checked5 = ref(false);
const csl = ref([])
const isjd = ref(false);
const identifyUser = ref("");
const zhong = ref("");
const imurl = ref({})
const ulw = ref(0)
const imdex = ref(0);
const jdobj = ref({});
// 预览
const yml = ref(0);
const ymdex = ref(0);
const ymedl = ref([]);
const ymurl = ref({});
const isym = ref(false);
const ymiv = (data, index) => {
    ymdex.value = index;
    ymurl.value = data;
}

const resp = () => {
    pageNum = 0;
    currentPage.value = 1;
    getpage();
}

const ymtotal = ref([]);
let startIndex = 0; // 初始索引位置
const openy = (data) => {
    startIndex = 10;
    ymdex.value = 0;
    ymtotal.value = data.mediaList;
    ymedl.value = ymtotal.value.slice(0, 10);
    yml.value = data.mediaList.length * 135;
    ymurl.value = data.mediaList[0];
    isym.value = true;
}


const load = () => {
    if (startIndex < ymtotal.value.length) {
        const newItems = ymtotal.value.slice(startIndex, startIndex + 10);
        startIndex += 10;
        ymedl.value = [...ymedl.value, ...newItems];
    }
    else {
        ElMessage({
            message: '文件已经全部加载完毕',
            type: 'success',
        })
    }
}

const workerNameStr = ref('');
const identifyStatusStr = ref('0');
const aptie = ref('');
const getaptie = (t) => {
    if (t != null) {
        let y = t[0].getFullYear();
        let m = (t[0].getMonth() + 1) > 9 ? (t[0].getMonth() + 1) : '0' + (t[0].getMonth() + 1);
        let d = t[0].getDate() > 9 ? t[0].getDate() : '0' + t[0].getDate();
        startTime = y + '-' + m + '-' + d;
        let y2 = t[1].getFullYear();
        let m2 = (t[1].getMonth() + 1) > 9 ? (t[1].getMonth() + 1) : '0' + (t[1].getMonth() + 1);
        let d2 = t[1].getDate() > 9 ? t[1].getDate() : '0' + t[1].getDate();
        endTime = y2 + '-' + m2 + '-' + d2;
    } else {
        startTime = '';
        endTime = '';
    }
    resp()
}

const getpage = async () => {
    let areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
    let res = await ipage(10, pageNum, areaId, startTime, endTime, surveyType, specieType, resourceType, workerNameStr.value, identifyStatusStr.value, '')
    if (res.code == '200') {

        res.data.content.forEach(e => {
            e['checked'] = true;
            e['checked2'] = false;
        })

        dlist.value = res.data.content;
        total.value = res.data.totalElements;
    }
}


const getworkers = async () => {
    let areaId = JSON.parse(window.sessionStorage.getItem('usermsg')).areaId;
    let obj = {
        areaId: areaId,
        siteIdStr: ""
    };
    let res = await workers(obj);
    let arr = [];
    if (res.code == '200') {
        res.data.forEach(e => {
            let z = {
                value: e,
                label: e,
            }
            arr.push(z)
        });

        workerslist.value = arr;
    }

};

const handleCurrentChange = (val) => {
    // console.log(`current page: ${val}`)
    pageNum = val - 1;
    getpage();
}

const formattedDate = (milliseconds) => {
    const date = new Date(milliseconds);
    // 获取年、月、日
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，需要加1，并确保两位数格式
    const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数格式

    // 构建 yyyy-mm-dd 格式的日期字符串
    return `${year}-${month}-${day}`;
};

// const checked2 = ref(false);
// const checked = ref(true);
const xzxc = (data) => {
    if (data.checked) {
        data.checked2 = false
    }
};
const xzai = (data) => {
    if (data.checked2) {
        data.checked = false
    }
}


const xcjd = () => {
    if (checked3.value) {
        checked4.value = false;
        zhong.value = jdobj.value.zhong;
        getspecieDetail();
    }
};
const aijd = () => {
    if (checked4.value) {
        checked3.value = false;
        zhong.value = jdobj.value.aiZhong;
        getspecieDetail();
    }
}

const subres = async (d) => {
    let obj = {
        "id": d.id,
        "surveyType": d.surveyType,
        "specieType": d.specieType,
        "resourceType": d.resourceType,
        "identifyStatus": "1",
        "zhong": d.zhong,
        "zhongLatin": d.zhongLatin,
        "number": d.number,
        "identifyUser": d.identifyUser,
        "sex": ""
    }
    if (d.checked2) {
        obj.zhong = d.aiZhong
    }

    console.log(obj.zhong);
    

    if (obj.zhong && obj.zhong != '') {
        let res = await ifd(obj)
        if (res.code == '200') {
            getpage();
            ElMessage({
                message: '鉴定成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    } else {
        ElMessage({
            message: '请前往鉴定，填写物种信息',
            type: 'warning',
        })
    }


}

// 提交鉴定
const tjsub = async () => {
    let obj = {
        "id": jdobj.value.id,
        "surveyType": jdobj.value.surveyType,
        "specieType": jdobj.value.specieType,
        "resourceType": jdobj.value.resourceType,
        "identifyStatus": "1",
        "zhong": zhong.value,
        "zhongLatin": zhongLatinName.value,
        "number": jdobj.value.number,
        "identifyUser": identifyUser.value,
        "sex": jdobj.value.sex
    }

    if (checked5.value) {
        obj.identifyStatus = '2';
    }

    if (zhong.value == '' && checked5.value == false) {
        ElMessage({
            message: '物种名不能为空',
            type: 'warning',
        })
    } else {
        let res = await ifd(obj)
        if (res.code == '200') {
            getpage();
            isjd.value = false;
            ElMessage({
                message: '鉴定成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    }
}


const goleft = () => {
    if (imdex.value > 0) {
        imdex.value--;
        imurl.value = csl.value[imdex.value];
    } else {
        ElMessage({
            message: '已经是第一张了',
            type: 'warning',
        })
    }
};

const goright = () => {
    if (imdex.value < csl.value.length - 1) {
        imdex.value++;
        imurl.value = csl.value[imdex.value];
    } else {
        ElMessage({
            message: '已经是最后一张了',
            type: 'warning',
        })
    }
};

const itm = (data, index) => {
    imdex.value = index;
    imurl.value = data;
}

const csymtotal = ref([]);
let csstartIndex = 0; // 初始索引位置

const gojd = (data) => {
    csstartIndex = 10;
    imdex.value = 0;
    csymtotal.value = data.mediaList;
    csl.value = csymtotal.value.slice(0, 10);
    ulw.value = data.mediaList.length * 135;
    imurl.value = data.mediaList[0];
    jdobj.value = data;
    if (data.identifyZhong != null) {
        zhong.value = data.identifyZhong;
    } else {
        checked3.value = true;
        zhong.value = data.zhong;
    }
    if (data.identifyUser != '') {
        identifyUser.value = data.identifyUser
    }

    if (data.identifyStatus == '2') {
        checked5.value = true
    } else {
        checked5.value = false
    }

    getspecieNameList();
    getspecieDetail();
    isjd.value = true;
}

const loads = () => {
    console.log(csstartIndex);
    if (csstartIndex < csymtotal.value.length) {
        const newItems = csymtotal.value.slice(csstartIndex, csstartIndex + 10);
        csstartIndex += 10;
        csl.value = [...csl.value, ...newItems];
    }
    else {
        ElMessage({
            message: '文件已经全部加载完毕',
            type: 'success',
        })
    }
}

const zhonglist = ref([]);

const loading = ref(false)
const options = ref([])
const remoteMethod = (query) => {
    if (query) {
        let obj = {
            type: route.query.resourceType,
            specieType: jdobj.value.specieType,
            zhong: query
        }
        specieNameList(obj).then(res => {
            if (res.code == '200') {
                let arr = [];
                res.data.forEach(e => {
                    let z = {
                        label: e,
                        value: e
                    }
                    arr.push(z)
                })
                loading.value = true
                setTimeout(() => {
                    loading.value = false
                    zhonglist.value = arr.filter((item) => {
                        return item.label.toLowerCase().includes(query.toLowerCase())
                    })
                }, 200)
            }
        })

    } else {

        zhonglist.value = options.value;
    }
}


const getspecieNameList = async () => {
    let obj = {
        type: route.query.resourceType,
        specieType: jdobj.value.specieType,
        zhong: ""
    }
    let res = await specieNameList(obj)
    if (res.code == '200') {
        let arr = [];
        res.data.forEach(e => {
            let z = {
                label: e,
                value: e
            }
            arr.push(z)
        })
        zhonglist.value = arr;
    }
}

//拉丁名

const zhongLatinName = ref('')
const getspecieDetail = async () => {
    if (zhong.value != jdobj.value.zhong) {
        checked3.value = false;
    };
    if (zhong.value != jdobj.value.aiZhong) {
        checked4.value = false;
    };
    let obj = {
        specieType: jdobj.value.specieType,
        type: route.query.resourceType,
        zhong: zhong.value
    }
    let res = await specieDetail(obj);
    if (res.code == '200') {
        if (res.data.zhongLatinName != '') {
            zhongLatinName.value = res.data.zhongLatinName
        } else {
            zhongLatinName.value = '未检索到该物种拉丁名'
            // ElMessage({
            //     message: '未检索到该物种拉丁名，请确认物种名称正确',
            //     type: 'warning',
            // })
        }
    }
}

const delm = () => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let id = csl.value[imdex.value].id;
        delmi(id).then(res => {
            if (res.code == '200') {
                csl.value.splice(imdex.value, 1);
                if (csl.value.length > 0) {
                    imdex.value = 0;
                    imurl.value = csl.value[0];
                } else {
                    getpage();
                    isjd.value = false;
                }

                ElMessage({
                    type: 'success',
                    message: '删除成功!',
                })
            }
        })


    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}

onMounted(() => {
    specieType = route.query.specieType;
    resourceType = route.query.resourceType;
    surveyType = route.query.surveyType;
    identifyUser.value = JSON.parse(window.sessionStorage.getItem('usermsg')).username;
    getpage();
    getworkers();

})
</script>
<template>
    <div>
        <div class="d-title">
            <span style="color: #909399;">专家鉴定</span>
            <span style="color: #909399;">></span>
            <span style="font-weight: 700;">{{ route.query.name }}</span>
        </div>
        <div class="d-con">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-date-picker v-model="aptie" @change="getaptie" type="daterange" style="width: 100%;"
                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" size="large" />
                </el-col>
                <el-col :span="4">
                    <el-select v-model="workerNameStr" class="m-2" @change="resp()" clearable style="width: 100%;"
                        placeholder="工作人员" size="large">
                        <el-option v-for="item in workerslist" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="identifyStatusStr" @change="resp()" class="m-2" style="width: 100%;"
                        placeholder="鉴定状态" size="large">
                        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button @click.stop="router.back()" size="large" type="primary">返回</el-button>
                </el-col>
            </el-row>

            <ul class="d-ul scrollable">
                <li class="d-li" v-for="(i, index) in dlist" :key="i.id">
                    <!-- 角标 -->
                    <div v-if="i.identifyStatus == '0'" class="d-j-b"><span>未鉴定</span></div>
                    <div v-if="i.identifyStatus == '2'" class="d-j-b" style="background-color: #AAA;"><span>无法鉴定</span>
                    </div>
                    <div v-if="i.identifyStatus == '1'" class="d-j-b" style="background-color: #387BFF;">
                        <span>已鉴定</span>
                    </div>
                    <!-- 主图 -->
                    <div class="d-ivb" @click.stop="openy(i)">
                        <!-- 角标 -->
                        <div class="d-ivb-j">
                            <img src="/src/assets/img/icm.png" alt="">
                            <span>{{ i.mediaList.length }}张</span>
                        </div>
                        <img v-if="i.mediaList[0].type == 'image'" :src="i.mediaList[0].path" alt="">
                        <img v-if="i.mediaList[0].type == 'voice'" :src="nwav" alt="">
                        <video v-if="i.mediaList[0].type == 'video'" :src="i.mediaList[0].path"></video>
                    </div>
                    <!-- 鉴定信息 -->
                    <div class="d-j-ms">
                        <div class="d-j-ms-b">
                            <div>调查人员</div>
                            <div>{{ i.worker }}</div>
                        </div>
                        <div class="d-j-ms-b">
                            <div>调查时间</div>
                            <div>{{ formattedDate(i.insertTime) }}</div>
                        </div>
                        <div class="d-j-ms-s">
                            <div class="d-j-ms-b" style="flex: 8;">
                                <div>鉴定结果</div>
                                <div>{{ i.identifyZhong }}</div>
                            </div>
                            <div style="flex: 2;display: flex;justify-content: flex-end;"></div>
                        </div>
                        <div class="d-j-ms-s">
                            <div class="d-j-ms-b" style="flex: 8;">
                                <div>现场填写</div>
                                <div>{{ i.zhong }}</div>
                            </div>
                            <div style="flex: 2;display: flex;justify-content: flex-end;"><el-checkbox @change="xzxc(i)"
                                    v-model="i.checked" size="large" /></div>
                        </div>
                        <div class="d-j-ms-s">
                            <div class="d-j-ms-b">
                                <div>AI识别</div>
                                <div>{{ i.aiZhong }}</div>
                            </div>
                            <div class="d-j-ms-b" style="display: flex;justify-content: space-between;">
                                <div style="width: 50px;">可信度</div>
                                <div>{{ i.aiScore }}</div>
                                <el-checkbox @change="xzai(i)" v-model="i.checked2" size="large" />
                            </div>
                        </div>
                        <div class="d-j-ms-c">
                            <div @click.stop="gojd(i)" style="border-right: 1px solid #DCDFE6;">
                                <span>前往鉴定>></span>
                            </div>
                            <div @click.stop="subres(i)">
                                <span>确认结果</span>
                            </div>
                        </div>

                    </div>
                </li>
            </ul>

            <div class="d-page">
                <el-pagination v-model:current-page="currentPage" :page-size="10" :small="false" :disabled="disabled"
                    :background="background" layout="total,prev, pager, next" :total="total"
                    @current-change="handleCurrentChange" />
            </div>


            <!-- 查看大图 B-->
            <div class="d-lkb" v-if="isym">
                <div class="d-lkb-c" @click.stop="isym = false">
                    <img src="/src/assets/img/close.png" alt="">
                </div>
                <div class="d-lkb-x">
                    <img v-if="ymurl.type == 'image'" :src="ymurl.path" alt="">
                    <audio v-if="ymurl.type == 'voice'" :src="ymurl.path" controls alt=""></audio>
                    <video v-if="ymurl.type == 'video'" :src="ymurl.path" controls autoplay></video>
                </div>
                <div style="padding: 0 24px;overflow: hidden;background-color: #DCDFE6;">
                    <div class="app-p-i-b">
                        <div class="app-p-i-b-csa">
                            <ul style="height: 100px;overflow: hidden;" :style="{ width: ymedl.length * 135 + 'px' }">
                                <li style="width: 130px;" v-for="(i, index) in ymedl" :key="i.id"
                                    :class="ymdex == index ? 'ibd' : ''" @click.stop="ymiv(i, index)">
                                    <img v-if="i.type == 'image'" :src="i.path" alt="">
                                    <img v-if="i.type == 'voice'" :src="nwav" alt="" />
                                    <video v-if="i.type == 'video'" :src="i.path"></video>
                                </li>
                            </ul>
                        </div>
                        <div class="loadMore" @click.stop="load">
                            <img style="width: 56px;height: 60px;" :src="lms" alt="">
                            <div style="text-align: center;color: #fff;">
                                <span>{{ ymedl.length }}</span> / <span>{{ ymtotal.length }}</span>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
            <!-- 查看大图 E-->

            <!-- 人工鉴定 B-->

            <div class="app-pup" v-if="isjd">
                <div>
                    <!-- 关闭 -->
                    <div class="app-p-close" @click.stop="isjd = false">
                        <img src="/src/assets/img/close.png" alt="">
                    </div>
                    <div class="app-pup-con">
                        <div class="app-p-i">
                            <div class="app-p-i-t" title="删除图片">
                                <!-- 删除 -->
                                <div class="app-p-i-d" @click.stop="delm">
                                    <i class="icon iconfont icon-shanchu"></i>
                                </div>
                                <!-- 左边 -->
                                <!-- <div class="app-ca-l" @click.stop="goleft()">
                                    <i style="font-size: 30px;" class="icon iconfont icon--zuo"></i>
                                </div> -->
                                <!-- 右边 -->
                                <!-- <div class="app-ca-r" @click.stop="goright()">
                                    <i style="font-size: 30px;" class="icon iconfont icon--you"></i>
                                </div> -->
                                <!-- 主图 -->
                                <img v-if="imurl.type == 'image'" :src="imurl.path" alt="">
                                <audio v-if="imurl.type == 'voice'" :src="imurl.path" controls alt=""></audio>
                                <video v-if="imurl.type == 'video'" :src="imurl.path" controls autoplay></video>
                            </div>
                            <div class="app-p-i-b">
                                <div class="app-p-i-b-csa">
                                    <ul style="height: 100px;overflow: hidden;"
                                        :style="{ width: csl.length * 135 + 'px' }">
                                        <li style="width: 130px;" v-for="(i, index) in csl" :key="i.id"
                                            :class="imdex == index ? 'ibd' : ''" @click.stop="itm(i, index)">
                                            <img v-if="i.type == 'image'" :src="i.path" alt="">
                                            <img v-if="i.type == 'voice'" :src="nwav" alt="">
                                            <video v-if="i.type == 'video'" :src="i.path"></video>
                                        </li>
                                    </ul>
                                </div>
                                <div class="loadMore" @click.stop="loads">
                                    <img style="width: 56px;height: 60px;" :src="lms" alt="">
                                    <div style="text-align: center;color: #fff;">
                                        <span>{{ csl.length }}</span> / <span>{{ csymtotal.length }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="app-p-t">
                            <div class="app-p-t-t">调查信息</div>
                            <div class="form_30" style="height: 40px">
                                <div>
                                    <div>
                                        <div><span>调查人员</span></div>
                                    </div>
                                    <div>
                                        <span>{{ jdobj.worker }}</span>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <div><span>调查时间</span></div>
                                    </div>
                                    <div>
                                        <span>{{ formattedDate(jdobj.insertTime) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form_100" style="height: 40px">
                                <div>
                                    <div><span>现场填写</span></div>
                                </div>
                                <div style="justify-content: space-between;">
                                    <span>{{ jdobj.zhong }}</span>
                                    <div style="width: 100px;text-align: left;">
                                        <el-checkbox @change="xcjd" v-model="checked3" label="" size="large" />
                                    </div>
                                </div>
                            </div>
                            <div class="form_100" style="height: 40px">
                                <div>
                                    <div><span>AI鉴定</span></div>
                                </div>
                                <div style="justify-content: space-between;">
                                    <span>{{ jdobj.aiZhong }}</span>
                                    <div style="width: 100px;text-align: left;">
                                        <el-checkbox @change="aijd" v-model="checked4"
                                            :label="'置信度(' + jdobj.aiScore + ')'" size="large" />
                                    </div>
                                </div>
                            </div>
                            <!-- 鉴定 -->
                            <div class="app-p-t-t" style="margin-top: 24px;">
                                <span>鉴定</span>
                                <el-checkbox v-model="checked5" label="无法鉴定" size="large" />
                            </div>
                            <div style="overflow: hidden;" v-if="!checked5">
                                <div class="form_30" style="height: 40px">
                                    <div>
                                        <div>
                                            <div><span>物种名称</span></div>
                                        </div>
                                        <div>
                                            <el-select v-model="zhong" filterable remote :remote-method="remoteMethod"
                                                :loading="loading" @change="getspecieDetail" placeholder="填选物种名称">
                                                <el-option v-for="item in zhonglist" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <div><span>拉丁名</span></div>
                                        </div>
                                        <div>
                                            <span>{{ zhongLatinName }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form_100" v-if="specieType == 'animal'" style="height: 40px">
                                    <div>
                                        <div><span>性别</span></div>
                                    </div>
                                    <div>
                                        <el-radio-group v-model="jdobj.sex" class="ml-4">
                                            <el-radio value="雌" size="small">雌</el-radio>
                                            <el-radio value="雄" size="small">雄</el-radio>
                                            <el-radio value="雌雄都有" size="small">雌雄都有</el-radio>
                                            <el-radio value="难以辨认" size="small">难以辨认</el-radio>
                                        </el-radio-group>
                                    </div>
                                </div>
                                <div class="form_100" style="height: 40px">
                                    <div>
                                        <div><span>数量</span></div>
                                    </div>
                                    <div>
                                        <el-input v-model="jdobj.number" type="number" placeholder="数量" />
                                    </div>
                                </div>
                                <div class="form_100" style="height: 40px">
                                    <div>
                                        <div><span>鉴定人</span></div>
                                    </div>
                                    <div>
                                        <el-input v-model="identifyUser" placeholder="默认登陆人员" />
                                    </div>
                                </div>
                            </div>
                            <div class="submits">
                                <el-button type="primary" @click.stop="tjsub">提交鉴定</el-button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 人工鉴定 E-->
        </div>
    </div>
</template>
<style scoped>
.d-title {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.d-title span {
    margin-right: 8px;
    font-size: 16px;
}

.d-con {
    width: 100%;
    height: calc(100% - 40px);
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(220, 223, 230, 1);
    background-color: #fff;
    position: relative;
}

.d-ul {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: 24px;
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
}

.d-li {
    width: calc((100% - 96px) / 5);
    height: 350px;
    border-radius: 4px;
    margin: 0 16px 16px 0;
    box-shadow: 0 0 5px rgba(220, 223, 230, 1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.d-li:nth-child(5n) {
    margin-right: 0;
}

.d-j-b {
    width: 80px;
    height: 32px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 0px;
    background: #FCC80F;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.d-j-ms {
    width: 100%;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.d-j-ms-b {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.d-j-ms-b>div:nth-child(1) {
    height: 30px;
    width: 80px;
    line-height: 30px;
}

.d-j-ms-b>div:nth-child(2) {
    height: 30px;
    line-height: 30px;
    color: #aaa;
}

.d-j-ms-s {
    width: 100%;
    padding: 0 4px;
    height: 30px;
    display: flex;
    align-items: center;
}

.d-j-ms-c {
    width: 100%;
    color: #387BFF;
    border-top: 1px solid #DCDFE6;
    display: flex;
    cursor: pointer;
}

.d-j-ms-c>div {
    flex: 1;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.d-page {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 6px;
    left: 0;
}

.d-ivb {
    width: 100%;
    height: 150px;
    cursor: pointer;
    position: relative;
}

.d-ivb img {
    width: 100%;
    height: 100%;
}

.d-ivb video {
    width: 100%;
    height: 100%;
}

.d-ivb-j {
    /* width: 90px; */
    height: 30px;
    padding: 4px 6px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 6px;
    bottom: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.70);
}

.d-ivb-j img {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.d-lkb {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.70);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.d-lkb-c {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

.d-lkb-x {
    width: 100%;
    height: 83%;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.d-lkb-x img {
    max-width: 100%;
    max-height: 100%;
}

.d-lkb-x video {
    max-width: 100%;
    max-height: 100%;
}

.app-pup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.app-pup>div {
    width: 95%;
    height: 90%;
    padding: 24px;
    position: relative;
    border-radius: 8px;
    background-color: #fff;
}

.app-p-close {
    color: #387BFF;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 3;
}

.app-pup-con {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.app-pup-con>div {
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.app-p-i {
    flex: 6;
    padding-right: 8px;
}

.app-p-i-t {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #aaa;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.app-p-i-t img {
    max-width: 100%;
    height: 100%;
}

.app-p-i-t video {
    max-width: 100%;
    height: 100%;
}

.app-p-i-d {
    width: 25px;
    height: 25px;
    font-weight: 700;
    color: #FF0909;
    background-color: #DCDFE6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9;
}

.app-p-i-b {
    width: 100%;
    height: 20%;
    display: flex;
}

.app-p-i-b-csa {
    width: calc(100% - 120px);
    height: 100%;
    padding: 8px 0;
    overflow-y: hidden;
    overflow-x: auto;
}

.app-p-i-b li {
    float: left;
    height: 100%;
    margin-right: 5px;
    border-radius: 4px;
    background-color: #aaa;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.app-p-i-b img {
    width: 100%;
    height: 100%;
}

.loadMore {
    width: 100px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 8px;
    margin-left: 16px;
    border-radius: 8px;
    background-color: #387bff;
}

.app-p-t {
    flex: 4;
}

.ibd {
    border: 3px solid #387BFF;
}

.app-ca-l {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translate(0, -50%);
    z-index: 5;
}

.app-ca-r {
    color: #fff;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(0, -50%);
    z-index: 5;
}

.app-p-t-t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}


.form_100 {
    width: 100%;
    border: 1px solid #DCDFE6;
    border-top: none;
    box-sizing: border-box;
    display: flex;
}

.form_100>div:nth-child(1) {
    width: 144px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(220, 223, 230, 0.3);
    flex-shrink: 0;
}

.form_100>div:nth-child(1) span {
    display: inline-block;
    position: relative;
}

.form_100>div:nth-child(2) {
    width: calc(100% - 144px);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.form_30 {
    width: 100%;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    display: flex;
}

.form_30>div {
    flex: 1;
    height: 100%;
    display: flex;
    flex-shrink: 0;
}

.form_30>div>div:nth-child(1) {
    width: 144px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(220, 223, 230, 0.3);
    flex-shrink: 0;
}

.form_30>div>div:nth-child(1) span {
    display: inline-block;
    position: relative;
}


.form_30>div>div:nth-child(2) {
    width: calc(100% - 144px);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.submits {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-p-i-b video {
    width: 100%;
    height: 100%;
}
</style>